import './ModifyUserPassword.scss'
import { useState } from 'react'
import { Form, Input, Button, App } from 'antd'

const ModifyUserPassword = ({ Off }) => {
    const { message } = App.useApp()
    const [form] = Form.useForm()
    const [Loading, setLoading] = useState(false)

    const onFinish = (e) => {
        setLoading(true)
        message.success('密码修改成功!')
        setTimeout(Off, 500);
    }

    return (
        <div className='ModifyUserPassword'>
            <Form
                form={form}
                name="basic"
                layout="vertical"
                autoComplete="off"
                className='FormTemp'
                onFinish={onFinish}
            >
                <Form.Item
                    className='OneFormItem'
                    label="原密码"
                    name="oldPwd"
                    rules={[{ required: true }]}
                >
                    <Input.Password placeholder='请输入原密码' />
                </Form.Item>
                <Form.Item
                    className='OneFormItem'
                    label="新密码"
                    name="newPwd"
                    rules={[{ required: true }]}
                >
                    <Input.Password placeholder='请输入新密码' />
                </Form.Item>
                <Form.Item
                    className='OneFormItem'
                    label="确认新密码"
                    name="conPwd"
                    dependencies={['newPwd']}
                    rules={[
                        { required: true }, ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('newPwd') === value) return Promise.resolve()
                                return Promise.reject(new Error('请确认新密码!'))
                            }
                        })
                    ]}
                >
                    <Input.Password placeholder='请确认新密码' />
                </Form.Item>
                <div className="BtnFormItem">
                    <Button type="primary" htmlType="submit" size='large' loading={Loading}>确认修改</Button>
                </div>
            </Form>
        </div>
    );
};

export default ModifyUserPassword;